<template>
	<div class="header">
		<div class="back-white" :style="[backStyle]" @click='toBack'>
			<image :src="$surl('/list/back_white.png')" mode="aspectFill"></image>
		</div>
		<image class="bg-img" :src="menuData['bg_img']" mode="aspectFill"></image>
		<div class="header-content">
			<view class="menu-top">
				<image class="menu-icon" :src="menuData['icon']" mode="aspectFill"></image>
				<div class="menu-info">
					<text>{{ menuData['name'] }}</text>
					<text>{{ tools.formatNumber(menuData['count']) }}动态</text>
				</div>
			</view>
			<view class="menu-des">
				{{ menuData['description'] }}
			</view>
		</div>
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import tools from '@/utils/tools/index.js'
	import { useGeneralStore } from '@/store/general.js'
	import { useSystemStore } from '@/store/system.js'

	const systemStore = useSystemStore();
	const generalStore = useGeneralStore();

	const props = defineProps({
		id: {
			type: String,
			default: ''
		}
	})

	const menuData = computed(() => {
		for (let item of generalStore.menuList) {
			if (item['_id'] === props.id) return item;
		}
		return {}
	});

	const backStyle = computed(() => {
		const iconHeight = uni.upx2px(52);
		const { statusBar, navigationBar } = systemStore.navbarInfo;
		return {
			paddingTop: `${statusBar + (navigationBar / 2) - (iconHeight / 2)}px`
		}
	})

	function toBack() {
		uni.navigateBack({ delta: 1 })
	}
</script>

<style lang="scss">
	.header {
		position: relative;
		z-index: 1;

		.bg-img {
			z-index: -1;
			width: 100%;
			height: 540rpx;
			vertical-align: top;
		}

		.back-white {
			z-index: 9;
			height: 52rpx;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 32rpx;
			position: absolute;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.header-content {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			margin-top: 205rpx;
			padding: 0 32rpx;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			color: #fff;

			.menu-top {
				display: flex;

				.menu-icon {
					border-radius: 50%;
					height: 118rpx;
					width: 118rpx;
					flex-shrink: 0;
				}

				.menu-info {
					height: 118rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 24rpx;

					text:first-child {
						font-size: 42rpx;
					}

					text:last-child {
						font-size: 29rpx;
						margin-top: 2rpx;
					}
				}
			}

			.menu-des {
				font-size: 32rpx;
				line-height: 48rpx;
				margin-top: 22rpx;
			}
		}
	}
</style>